<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
    .layer1{width:100%;height:100px;}
	   .layer1-1{width:40%;height:100px;background:#fff;float:left;}
	   .layer1-2{width:60%;height:100px;background:#649EDF;float:left;}
	   .layer1-3{clear:both;}
	.layer2{width:100%;height:500px;background:#96C;}
	   .layer2-1{width:100%;height:300px;background:#6F0;}
	   .layer2-2{width:100%;height:200px;padding:3px;background:#3A94D6}
	        .layer2-2-1{width:30%;height:190px;background:#33F;float:left;margin-left:10px;margin-right:10px;border:3px solid blue;}
			.layer2-2-2{width:35%;height:190px;background:#C3F;float:left;margin-left:10px;margin-right:10px;border:3px solid blue;}
			.layer2-2-3{width:30%;height:190px;background:#CF3;float:left;margin-left:10px;margin-right:10px;border:3px solid blue;}
			.layer2-2-4{clear:both;}
	.layer3{width:100%;height:100px;background:#833AD3}
	       #navigation a{
	
	           width:16%;
	           float:left;
	           height:120px;
	           line-height:120px;
	           color:#074C97;
	           padding:5px 5px 5px 0.5em;
	           text-decoration:none;
		   }
		    #navigation a:hover{
				background-color:#074C97;			
	            color:#ffff00;						
		  }		  
</style>
</head>

<body>
     <div class="layer1">     <div class="layer1-1"><img src="logo.png"ait="商职"height="100px" width="100%"/></div>     <div class="layer1-2">
      <div id="navigation">
		      	<a href="#">学校概况</a>
	            <a href="#">机构设置</a>
	            <a href="#">教育教学</a>
	            <a href="#">创新创业</a>
	            <a href="#">科技服务</a>
		  </div>          </div>      <div class="layer1-3"></div>      </div>
     <div class="layer2">               
                          <div class="layer2-1"><img src="shang.jpg"ait="商职"height="300px" width="100%"/></div>              
                               <div class="layer2-2">     
                                              <div class="layer2-2-1">  <h3>学校要闻</h3>
				<br/>
				 
				 <ul>
				 
				  <li><a href="#">马克思主义学院召开陶行知教育...</a></li>
				  <li><a href="#">我校承办2017年山东省“农产品质量...</a></li>
				  <li><a href="#">2017山东养老服务业高峰论坛在我...</a></li>
				  <li><a href="#">校报荣获全国高校校报协会2016年...</a></li>
				  <li><a href="#">浙江纺织服装职业技术学院、河北...</a></li>
				 </ul></div>    
                                                     <div class="layer2-2-2"><h3>通知公告</h3>
			    			
				 <br/>
				<li><a href="#">关于组织开展国家职业指导师、心理...</a></li>
				 <li><a href="#">关于公布2017年公开招聘工作人员进...</a></li>
				 <li><a href="#">关于公布2017年公开招聘工作人员笔...</a></li>
				 <li><a href="#">2017年公开招聘工作人员笔试公告...</a></li>
				 <li><a href="#">关于2017年公开招聘工作人员现场...</a></li></div>      
                                                            <div class="layer2-2-3"><h3>媒体报道</h3>
			    				
				 <br/>
				 <li><ahref="#">新浪山东：山东商职院承办2017年...</a></li>
				 <li><a href="#">大众网：山东商职院承办山东省职...</a></li>
				 <li><a href="#">新浪山东：2017山东养老服务业高...</a></li>
				 <li><a href="#">新浪山东：全国高校“形势与政策”...</a></li>
				 <li><a href="#">大众网：全国高校“形势与政策”课...</a></li>
			 </div>   
                                                                  <div class="layer2-2-4"></div>        
                                </div>          
                         </div>
     <div class="layer3"></div>
</body>
</html>
